<template>
  <div class="block text-center" style="background-color: #F2F5F8">
    <el-carousel height="146px">
      <el-carousel-item v-for="item in urls" :key="item">
        <img :src="item" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="content-container" style="background-color: #F2F5F8;">
    <div class="intro-container">
      <div class="intro-image">
        <img src="../assets/image.png" alt="Intro Image">
      </div>
      <div class="intro-text">
        <span>AIGC技术的核心思想是利用人工智能算法生成具有一定创意和质量的内容</span>
      </div>
    </div>
    <div class="image-container">
      <img src="../assets/image1.png" class="image-item" alt="Image 1">
      <img src="../assets/image2.png" class="image-item" alt="Image 2">
      <img src="../assets/image3.png" class="image-item" alt="Image 3">
    </div>
    <!-- <div class="image-container">
      <img src="../assets/image4.png" class="image-item small" alt="Image 4">
      <img src="../assets/image5.png" class="image-item small" alt="Image 5">
      <img src="../assets/image6.png" class="image-item small" alt="Image 6">
      <img src="../assets/image7.png" class="image-item small" alt="Image 7">
    </div>
    <div class="image-container">
      <img src="../assets/image4.png" class="image-item small" alt="Image 4">
      <img src="../assets/image5.png" class="image-item small" alt="Image 5">
      <img src="../assets/image6.png" class="image-item small" alt="Image 6">
      <img src="../assets/image7.png" class="image-item small" alt="Image 7">
    </div> -->
  </div>
</template>

<script setup>
import { reactive } from "vue";
var urls = reactive([
  "https://campusrecruitment.oss-cn-beijing.aliyuncs.com/banner1.png",
  "https://campusrecruitment.oss-cn-beijing.aliyuncs.com/banner2.png"
]);
</script>

<style scoped>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-container {
  width: 100%;
  padding: 20px;
}

.intro-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.intro-image img {
  max-width: 100%;
  height: auto;
}

.intro-text {
  margin-left: 20px;
  text-align: center;
}

.image-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.image-item {
  width: 30%;
  margin: 10px;
}

.image-item.small {
  width: 15%;
}
</style>
